<div class="p-2 mb-1 animated fadeInLeft" *ngIf="execution">

    <div class="d-flex justify-content-center align-items-center info-panel-header card-shadow">
        <span>Workflow Execution Information</span>

        <button *ngIf="!workflowDef?.isEmpty"
                class="btn btn-light btn-sm btn-labeled ml-auto"
                (click)="showDefinition(workflowDef)" title="Show workflow definition">
            <i class="fa fa-book"></i>Definition
        </button>

        <button *ngIf="workflowDef?.isEmpty"
                class="btn btn-light btn-sm btn-labeled ml-auto"
                title="Workflow definition is missing">
            <i class="fa fa-warning"></i>Definition
        </button>

    </div>

    <div class="d-flex flex-column">

        <!-- workflow name -->
        <cf-info-item [prop]="properties['workflow_name']"></cf-info-item>

        <!-- id -->
        <cf-info-item [prop]="properties['id']"></cf-info-item>

        <!-- workflow id -->
        <cf-info-item [prop]="properties['workflow_id']"></cf-info-item>

        <!-- state / state_info -->
        <div class="d-flex flex-row mb-4">
            <cf-info-item class="flex-0-0-15" [prop]="properties['state']"></cf-info-item>
            <cf-info-item class="flex-1-1-auto mnw-0" [prop]="properties['state_info']"></cf-info-item>
        </div>

        <!-- created_at / updated_at -->
        <div class="d-flex flex-row">
            <cf-info-item class="flex-1-1-auto" [prop]="properties['created_at']"></cf-info-item>
            <cf-info-item class="flex-1-1-auto" [prop]="properties['updated_at']"></cf-info-item>
            <cf-info-item class="flex-1-1-auto" [prop]="properties['duration']"></cf-info-item>
        </div>

        <!-- input -->
        <cf-info-item [prop]="properties['input']"></cf-info-item>

        <!-- output -->
        <cf-info-item [prop]="properties['output']"></cf-info-item>

        <!-- params -->
        <cf-info-item [prop]="properties['params']"></cf-info-item>
    </div>

</div>